<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=c78636f50113c0ca81d60713b019ac1a"></script>
    <script src="../JS/jquery-3.3.1.min.js"></script>
    <script src="../JS/layui/layui.js"></script>
    <script src="../CSS/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link href="../JS/layui/css/layui.css" rel="stylesheet" />
    <link href="../CSS/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet" />
    <link href="HTML/File.css" />
    <script src="../JS/qrcode.js"></script>
    <title>Document</title>
    <style>
        html,
        body,
        #container {
            height: 100%;
            width: 100%;
            background-color: white;
        }
        /* .content-window-card {
            position: relative;
            transform: translateY(-50%);
        } */
        
        .www {
            height: 300%;
            width: 300px;
            background-color: white;
        }
    </style>
</head>

<body>
    <div id="container"></div>


    <script>
        var infoWindow;
        var map = new AMap.Map("container", {
            zoom: 13,
            center: [116.401337, 39.907886],
            viewMode: '2D' //设置地图模式
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat(116.401337, 39.907886), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
            title: '北京'
        });

        map.add(marker);

        //在指定位置打开信息窗体

        function openInfo() {
            //构建信息窗体中显示的内容
            var info = [];
            info.push("<div id='fff' class='input-card content-window-card ccc' style='height: 300%;width: 300px;background-color: white;'><div><img style=\"float:left;\" src=\" https://webapi.amap.com/images/autonavi.png \"/></div> ");
            info.push("<div style=\"padding:7px 0px 0px 0px;\"><h4>高德软件</h4>");
            info.push("<p class='input-item'>电话 : 010-84107000   邮编 : 100102</p>");
            info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");
            console.log(info.join(""));

            infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                offset: new AMap.Pixel(0, -50),
                content: info.join("") //使用默认信息窗体框样式，显示信息内容
            });

            infoWindow.open(map, map.getCenter());

        }
        window.onload = openInfo();
    </script>
</body>

</html>